<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/mvc.js"></script>
<script type="text/javascript" src="js/mvc-init.js"></script>
<script type="text/javascript" src="js/mvc-layer.js"></script>
<script type="text/javascript" src="js/mvc-drag.js"></script>
<script type="text/javascript" src="js/mvc-view-rect.js"></script>

<script type="text/javascript" src="lib/encryptjs/encrypt.js"></script>
</head>
<style type="text/css">
ul,ol,menu,li{
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#container{
	position: absolute;
	left: 0px;
	top: 0px;
	right: 220px;
	bottom: 0px;
	background-color: #aaa;
}
#toolbar{
	width: 220px;
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
	border: 0px solid #ccc;
	background-color: #ccc;
}

#view{
	width: 360px;
	height: 480px;
	border: px solid #000;
	position: absolute;
	background-color: #fff;
}

.rect-handler{
	font-size: 14px;
	padding: 5px;
}
.rect-handler li{
	clear: both;
	margin: 0px 0px 3px 0px;
}
.rect-handler li label{
	display: block;
	width: 100%;
	height: 1.5em;
	line-height: 1.5em;
	overflow: hidden;
}
.rect-handler li span, .rect-handler li input{
	display: block;
	float: left;
}
.rect-handler li span{
	width: 50px;
	text-align: right;
	padding-right: 5px;
}

.activeLayer{
	border: 2px solid #888;
	margin-left: -2px;
	margin-top: -2px;
}
.rect-handler .quick_set{
	/*border: 1px solid #000;*/
	width: 144px;
	height: 144px;
	margin: 0px auto 5px auto;
	padding: 5px;
}

.rect-handler .quick_set em{
	display: block;
	float: left;
	border: 1px solid #000;
	width: 32px;
	height: 32px;
	margin: 1px;
	cursor: pointer;
	text-align: center;
	font-style: normal;
	line-height: 32px;
}
.rect-handler .quick_set em.fullw{
	width: 104px;
}
.rect-handler .quick_set em.fullh{
	height: 104px;
	line-height: 104px;
}

li.image_select{
	height: 120px;
}

.rect-handler li.image_button{
	/*border: 1px solid #000;*/
}
.rect-handler li.image_button span{
	background-color: #aaa;
	border: 1px solid #000;
	display: block;
	width: 198px;
	padding: 0px;
	margin: 0px;
	text-align: center;
	float: none;
	clear: both;
	cursor: pointer;
}
.thumb_detail{
	text-align: center;

}

li.image_select > div{
	width: 200px;
	height: 160px;
	/*border: 1px solid #000;*/
	background-color: #fff;
	background-repeat: no-repeat;
	/*background-size: 100% 100%;*/
	background-size: contain;
	background-position: center center;
}

#info{
	padding: 5px;
}

</style>
<body>

<div id="container">
	<div id="view"></div>
</div>
<div id="toolbar">
	<ul id="info">
		<li><input id="new_layer" onclick="new_layer()" type="button" value="NEW"></li>
	</ul>
</div>

<script type="text/javascript">

var configure = {
	width: 240,
	height: 400
};

var BGIMG = {};

function SetImage(imageData){
	var sha1 = encrypt.sha1(imageData.src);
	var className = 'bgimg_' + sha1;
	if(!(sha1 in BGIMG)){
		var css = {
			'background-image': 'url(' +  imageData.src + ')'
		};
		var rule = mvc.addGlobalRule('.' + className, css);
		BGIMG[sha1] = {
			rule: rule,
			data: imageData,
			className: className
		};
	}
	return {
		hash: sha1, className: className
	};
}

var activeLayer = null;

function new_layer(){
	var layer = mvc.CreateDragableLayer();
	layer.xy(0, 0).size(50, 50).css({'background': 'rgba(0,0,0,0.2)'});
	// layer.image('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=306691084,3931829672&fm=23&gp=0.jpg');
	layer.appendTo('#view');
	if(activeLayer){
		activeLayer.removeClass('activeLayer');
	}
	activeLayer = layer;
	activeLayer.addClass('activeLayer');
	thumb.set('info', activeLayer.$img_info);
	modelSnap.attach(activeLayer.valueOf());
	viewRectTool.attach(activeLayer);
}

function select_img(button){
	if(!activeLayer) return;
	var file = imageFile;
	if(file
		&& file.nodeName == 'INPUT'
		&& file.getAttribute('type') == 'file'){
		if(!file.$init){
			// console.log('init file')
			file.$init = true;
			file.onchange = function(e){
				util.getImageData(this.files[0], function(imgInfo){
					activeLayer.css('background', '');
					if(activeLayer.$img_info){
						activeLayer.removeClass(activeLayer.$img_info.className);
					};
					var sel = SetImage(imgInfo);

					var info = util.map(imgInfo, ['width', 'height', 'hash']);
					info.className = sel.className;

					activeLayer.$img_info = info;
					activeLayer.size(activeLayer.$img_info);
					activeLayer.addClass(activeLayer.$img_info.className);

					thumb.set('info', info);
				});
				this.value = null;
			};
		}
		file.click();
	}
}

function quick_set(e){
	if(!activeLayer) return;
	if(e.target.nodeName != 'EM') return;
	if(!e.target.innerHTML) return;
	var cmd = e.target.innerHTML.split('');
	if(cmd[0] === 'F'){
		// activeLayer.xy(0, 0);
		switch(cmd[1]){
			case 'W':
				activeLayer.left(0);
				activeLayer.width(configure.width);
				break;
			case 'H':
				activeLayer.top(0);
				activeLayer.height(configure.height);
				break;
			default:
				activeLayer.xy(0, 0);
				activeLayer.size(configure.width, configure.height);
				break;
		}
		return;
	}
	switch(cmd[0]){
		case 'L':
			activeLayer.left(0);
			break;
		case 'C':
			activeLayer.left(((configure.width - activeLayer.width()) / 2)>>0);
			break;
		case 'R':
			activeLayer.left(configure.width - activeLayer.width());
			break;
	}
	switch(cmd[1]){
		case 'T':
			activeLayer.top(0);
			break;
		case 'M':
			activeLayer.top(((configure.height - activeLayer.height()) / 2)>>0);
			break;
		case 'B':
			activeLayer.top(configure.height - activeLayer.height());
			break;
	}
}

mvc.init();

var viewRectTool = mvc.CreateViewRect({
	className: 'rect-handler'
});
viewRectTool.addItem([
	{ name: 'em', text: 'F', },
	{ name: 'em', text: 'FW', className: 'fullw' },
	{ name: 'em', text: 'FH', className: 'fullh' },
	{ name: 'em', text: 'LT', },
	{ name: 'em', text: 'CT', },
	{ name: 'em', text: 'RT', },
	{ name: 'em', text: 'LM', },
	{ name: 'em', text: 'CM', },
	{ name: 'em', text: 'RM', },
	{ name: 'em', text: 'LB', },
	{ name: 'em', text: 'CB', },
	{ name: 'em', text: 'RB', }
], null, 'quick_set').onclick = quick_set;

var imageFile = mvc.createElement({
	name: 'input', attrs: { type: 'file' }
});

viewRectTool.addItem(
[{
	name: 'span', className: 'image_button', text: 'select image',
	attrs: {
		onclick: 'javascript:select_img(this);'
	}
}], null, 'image_button');

var thumb = mvc.layer.create({
	type: 'thumbnail',
	create_rule: 1
}, ['info']).appendTo(viewRectTool.addItem(0, 0, 'image_select'));

var thumbDetail = thumb.addView({
	type: 'thumb_detail'
}).addClass('thumb_detail').text('-*-');

thumb.defineSetter(function(view, key, value, oldVal){
	if(oldVal){
		view.removeClass(oldVal.className);
	}

	if(value){
		view.addClass(value.className);
		thumbDetail.text(value.width + '*' + value.height);
	} else {
		view.clearClass();
		thumbDetail.text('-*-');
	}
});

viewRectTool.appendTo('#toolbar');
var modelSnap = mvc.CreateModelSnap();
var activeLayer = false, type = null;
var drag = mvc.dragger('#view');
drag.$state = function(e){
	var id = mvc.getAttribute(e.target, 'id');
	// thumb.set('background-image', null);
	// thumb.clearClass();

	if(activeLayer){
		activeLayer.removeClass('activeLayer');
	}
	activeLayer = mvc.findLayer(id);
	if(!activeLayer){
		viewRectTool.detach();
		thumb.set('info', false);
		return -1;
	}

	activeLayer.addClass('activeLayer');
	modelSnap.attach(activeLayer.valueOf());
	viewRectTool.attach(activeLayer);
	thumb.set('info', activeLayer.$img_info);
	type = mvc.getAttribute(e.target, 'type');
	return 0;
};
drag.onmove = function(offset){

	if(type == 'resize'){
		var size = modelSnap.size(offset);
		activeLayer.set(size);
		viewRectTool.size(size);
	} else {
		var pos = modelSnap.position(offset);
		activeLayer.set(pos)
		viewRectTool.position(pos);
	}
};
drag.onend = function(offset){
	// if(type == 'resize'){
	// 	activeLayer.size(modelSnap.size(offset));
	// } else {
	// 	activeLayer.xy(modelSnap.position(offset));
	// }
	// activeLayer.css({});
};

mvc.CenterScale('#view', configure.width, configure.height, function(r){
	drag.scale = r;
});

var cssRect = mvc.layer.rect({
	create_rule: 0
});
cssRect.appendTo('body')
.width(20).height(-100).top(20).left(-10)
;


</script>


</body>
</html>